<div cdkDrag cdkDragHandle
	 cdkDragRootElement=".cdk-overlay-pane"
	 mat-dialog-title>
	<div>
		<h3>Alter column <i>{{ form.get('old')?.get('name')!.value }}</i></h3>
	</div>

	<button aria-label="close dialog" mat-dialog-close mat-icon-button>
		<span class="material-symbols-outlined notranslate">close</span>
	</button>
</div>

<mat-dialog-content [class.showOlds]="oldValues">
	<app-column [form]="form"></app-column>
</mat-dialog-content>

<mat-dialog-actions>
	<button
		(click)="oldValues = !oldValues"
		[class.mat-raised-button]="oldValues"
		color="primary"
		mat-button>
		<span class="material-symbols-outlined notranslate">
			preview
		</span>
		Old values
	</button>

	<a *ngIf="selectedServer"
	   [href]="selectedServer!.driver.docs.types"
	   mat-button
	   target="_blank">
		<span class="material-symbols-outlined notranslate">
			help
		</span>
		{{ selectedServer.wrapper }} Types
	</a>

	<mat-spinner
		*ngIf="isLoading"
		[diameter]="30"
		color="primary"
	></mat-spinner>

	<button
		(click)="update()"
		*ngIf="!isLoading"
		[disabled]="!form.valid || JSON.stringify(form.get('old')?.value) === JSON.stringify(form.get('columns')!.value[0])"
		cdkFocusInitial
		color="primary"
		mat-flat-button>
		<span class="material-symbols-outlined notranslate">
			drive_file_rename_outline
		</span>
		Apply
	</button>
</mat-dialog-actions>
